<script setup>
import { onMounted, ref } from 'vue'
import { dataHotSellingProducts } from '@/apis/apis.js' 

const data = ref([])

const getData = async () => {
  const res = await dataHotSellingProducts()
  data.value = res.data
}

onMounted(async () => {
  await getData()
})
</script>

<template>
<div class="container">
  <div class="title">热销商品排名</div>
  <div class="content">
    <el-scrollbar :height="300" style="padding-right: 20px; --el-scrollbar-bg-color: orange; --el-scrollbar-hover-bg-color: orange;">
      <div class="item" v-for="(item, index) in data" :key="index">
        <div class="left">
          <img :src="item.goods_image">
          <span>{{ item.goods_name }}</span>
        </div>
        <div class="right">{{ item.quantity }}件</div>
      </div>
    </el-scrollbar>
  </div>
</div>
</template>

<style scoped lang="scss">
.container {
  padding-left: 20px;
  .title {
    display: flex;
    align-items: center;
    height: 32px;
  }
  .content {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      font-size: 14px;
      .left {
        display: flex;
        align-items: center;
        img {
          margin-right: 10px;
          width: 30px;
          aspect-ratio: 1 / 1;
        }
      }
    }
  }
}
</style>
